<template>
  <div class="selection">
    <div class="steps">
      <el-steps :active="1" finish-status="success" align-center>
        <el-step title="步骤1" description="选择电影场次"></el-step>
        <el-step title="步骤2" description="选择座位号"></el-step>
        <el-step title="步骤3" description="加入购物车"></el-step>
        <el-step title="步骤4" description="结算付款"></el-step>
      </el-steps>
    </div>
    <div class="all">
      <div class="info">
        <img :src="movieDetail.cover" alt="" />
        <p class="name">{{ movieDetail.name }}</p>
        <p class="type">类型：{{ movieDetail.type }}</p>
        <p class="area">地区：{{ movieDetail.region }}</p>
        <p class="length">时长：{{ movieDetail.duration }}分钟</p>
        <p class="play">
          放映：<span>{{ session.type }}放映</span>
        </p>
        <p class="start">
          开场：<span>{{ session.startTime }}</span>
        </p>
        <p class="end">
          散场：<span>{{ session.endTime }}</span>
        </p>
        <p class="price">
          票价：<span>￥{{ session.price }}/张</span>
        </p>
        <el-divider></el-divider>
        <div class="seat">
          <div>已选座位：</div>

          <div v-for="(item, index) in select" :key="index" class="choose">
            {{ item.seat_line }}排{{ item.seat_row }}座
          </div>
        </div>
        <p class="sum">
          总计：<span>￥{{ sum }}</span>
        </p>
        <el-divider></el-divider>
        <el-input
          v-model="tel"
          placeholder="请输入手机号码"
          class="tel"
        ></el-input>
        <el-button class="btn" type="primary" @click="intoCart()"
          >加入购物车</el-button
        >
      </div>
      <!-- 座位选择 -->
      <div class="seat_select">
        <div class="logo">
          <img src="@/assets/seat/u2458.png" alt="" />
          <span>可选座位</span>
          <img src="@/assets/seat/u2459.png" alt="" />
          <span>已选座位</span>
          <img src="@/assets/seat/u2460.png" alt="" />
          <span>已售座位</span>
        </div>
        <div class="line"></div>
        <p class="title">银幕中央</p>
        <div class="center-line"></div>
        <!-- 影厅座位 -->
        <div class="select" v-if="showSeats">
          <div
            class="seat_line"
            v-for="(line, line_index) in seat_list"
            :key="line_index"
          >
            <div
              class="seat_row"
              v-for="(item, row_index) in line"
              :key="row_index"
            >
              <img
                src="https://s3.bmp.ovh/imgs/2022/05/23/fd5095005dd0a279.png"
                alt=""
                v-if="item == 0"
                @click="choose(item, line_index, row_index)"
              />
              <img
                src="https://s3.bmp.ovh/imgs/2022/05/23/297698166c43258b.png"
                alt=""
                v-else-if="item == 1"
                @click="choose(item, line_index, row_index)"
              />
              <img
                src="https://s3.bmp.ovh/imgs/2022/05/23/a2ad680318df3380.png"
                alt=""
                v-else-if="item == 2"
                @click="noChoose()"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { SeatsArrangement, MovieArrangementById } from "@/api/movie";
import {addToCart} from "@/api/cart"
export default {
  data() {
    return {
      movieDetail: {
        // name: "XXXXXX",
        // start: "2022-01-12 15:25",
        // end: "2022-01-12 17:35",
        // play_type: "2D",
        // price: 30.5,
        // type: "科幻",
        // area: "中国大陆",
        // length: "130",
        // imgAddress: require("@/assets/movie/u2282.svg"),
      },
      session: {},
      sum: 0,
      tel: "",
      seat_list: [],
      num: 0,
      select: [],
      seatsNum: 0,
      showSeats:false,
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 选择座位
    choose(value, line, row) {
      // debugger
      if (value == 0) {
        if (this.num > 3) {
          alert("一次最多四张哦！");
        } else {
          this.$set(this.seat_list[line], row, 1);
          this.num += 1;
          this.select.push({
            seat_line: line + 1,
            seat_row: row + 1,
          });
          // console.log(this.select)
          this.select=this.sort(this.select)
          // console.log(this.select)
          this.select=this.reList(this.select)

          // this.showSort(this.select,this.select.seat_line,this.select.seat_row)
        }
        this.sum = this.num * this.session.price;
      } else {
        this.$set(this.seat_list[line], row, 0);
        this.num -= 1;
        for (var i = 0; i < this.select.length; i++) {
          if (
            this.select[i].seat_line == line + 1 &&
            this.select[i].seat_row == row + 1
          ) {
            var key = i;
          }
        }
        this.select.splice(key, 1);
        this.sum = this.num * this.session.price;
      }
      // console.log(this.select)
    },
    // 已被选的座位（不可选）
    noChoose() {
      alert("已经被选了哦！");
      console.log()
    },
    // 加入购物车
    intoCart() {
      if (this.checkPhoneAndSeats()) {
        var mySeats="";
        this.select.forEach(function(value,index,array){
          if(index==array.length-1){
            mySeats+=value.number
          }else{
            mySeats+=value.number+","
          }
        })
        // console.log(mySeats)
        const addData={
          uid:localStorage.getItem("uid"),
          aid:localStorage.getItem("aid"),
          status:0,
          phone:this.tel,
          seats:mySeats,
          price:this.sum,

        }
        addToCart(addData).then((res)=>{
          if(res.code==200){
            this.$message({
              message: "加入购物车成功，请及时付款",
              type: "success",
            });
          }
        })

        // console.log(this.select)
        this.$router.push("/personal_center/shopping_cart");
      }
    },
    // 检查是否选择座位和手机号码输入正误
    checkPhoneAndSeats() {
      if (this.select.length == 0) {
        this.$message({
          message: "请选择座位",
          type: "warning",
        });
        return false;
      }
      if (this.tel.length != 11) {
        this.$message({
          message: "电话号码输入有误",
          type: "warning",
        });
        return false;
      }
      return true;
    },

    // 获取本场电影信息
    getInfo() {
      MovieArrangementById(localStorage.getItem("aid")).then((res) => {
        res.msg = "电影信息";
        // console.log(res);
        res.data.arrangements.startTime = this.formatDate(
          res.data.arrangements.startTime
        );
        res.data.arrangements.endTime = this.formatDate(
          res.data.arrangements.endTime
        );
        this.movieDetail = res.data.film;
        this.session = res.data.arrangements;
        this.seatsNum = res.data.arrangements.seatNumber;
        this.loadSeats();
      });
    },

    // 按座位个数加载座位
    loadSeats() {
      // console.log(this.seatsNum);
      var n = this.seatsNum;
      for (var x = 0; x < Math.floor(n / 12) + 1; x++) {
        this.seat_list[x] = [];
        if (x != Math.floor(n / 12)) {
          for (var y = 0; y < 12; y++) {
            this.seat_list[x][y] = 0;
          }
        } else {
          for (var y = 0; y < n % 12; y++) {
            this.seat_list[x][y] = 0;
          }
        }
      }
      this.getSeats();
      // console.log(this.seat_list)
    },

    // 获取座位信息
    getSeats() {
      SeatsArrangement(localStorage.getItem("aid")).then((res) => {
        res.msg = "座位信息";
        // console.log(res);
        const list = this.seat_list;
        res.data.forEach(function (val) {
          var line = val.line;
          var row = val.row - 1;
          list[line][row] = 2;
        });
        this.seat_list = list;
        this.showSeats=true;
      });
    },

    // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() + 1 < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + ":";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + ":";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },

    // 已选座位列表排序
    sort(list){
      var newList=[];
      for(var i=0;i<list.length;i++){
        var number=(list[i].seat_line-1)*12+list[i].seat_row;
          newList.push(number);

      }
      newList=newList.sort((a,b)=>a-b);
      // console.log(newList)
      return newList
    },

    // 还原已选座位列表
    reList(list){
      var newList=[];
       for(var i=0;i<list.length;i++){
        //  console.log(list[i])
        var seat_line=Math.ceil(list[i]/12);
        // console.log(seat_line)
        if(list[i]%12==0){
          var seat_row=12;
        }else{
          var seat_row=list[i]%12;
        }
          newList.push({
            seat_line:seat_line,
            seat_row:seat_row,
            number:list[i],
          });

      }
      return newList
    },
    


  },
};
</script>
<style lang="scss" scoped>
.selection {
  height: 1200px;
  .steps {
    margin: 70px 0;
  }
  .all {
    width: 1300px;
    height: 900px;
    border: 1px rgb(245, 246, 247) solid;
    margin: 0 auto;
    box-shadow: 5px 5px 5px 0px darkgray;
    .info {
      width: 350px;
      height: 800px;
      background-color: rgb(245, 246, 247);
      padding: 50px;
      float: left;
      img {
        width: 137px;
        height: 197px;
        float: left;
      }
      .name {
        font-size: 24px;
        margin-left: 170px;
        margin-top: 10px;
        margin-bottom: 25px;
      }
      .type {
        margin: 5px 0;
        margin-left: 170px;
        font-size: 14px;
        color: gray;
      }
      .area {
        margin: 5px 0;
        margin-left: 170px;
        font-size: 14px;
        color: gray;
      }
      .length {
        margin: 5px 0;
        margin-left: 170px;
        font-size: 14px;
        color: gray;
      }
      .play {
        clear: both;
        margin-top: 100px;
        margin-bottom: 5px;
        color: gray;
        span {
          color: black;
        }
      }
      .start {
        margin: 15px 0;
        color: gray;
        span {
          color: rgb(245, 108, 108);
        }
      }
      .end {
        margin: 15px 0;
        color: gray;
        span {
          color: black;
        }
      }
      .price {
        margin: 15px 0;
        color: gray;
        span {
          color: black;
        }
      }
      .seat {
        margin-bottom: 30px;
        float: left;
        .choose {
          width: 65px;
          height: 25px;
          border: 2px rgb(245, 108, 108) solid;
          border-radius: 10px;
          text-align: center;
          float: left;
          margin: 10px 8px;
        }
      }
      .sum {
        clear: both;
        span {
          color: rgb(245, 108, 108);
          font-size: 25px;
          font-weight: bold;
        }
      }
      .tel {
        width: 280px;
        margin: 20px 0 70px 35px;
      }
      .btn {
        width: 280px;
        height: 60px;
        margin-left: 35px;
        list-style: none;
        background-color: rgb(245, 108, 108);
        border: 1px gray solid;
        border-radius: 40px;
      }
    }
    .seat_select {
      width: 650px;
      height: 800px;
      // background-color: red;
      float: left;
      padding: 100px;
      text-align: center;
      .logo {
        height: 40px;
        img {
          width: 40px;
          margin-left: 40px;
          margin-right: 10px;
        }
        span {
          position: relative;
          display: inline-block;
          bottom: 13px;
          font-size: 14px;
          color: gray;
        }
      }
      .line {
        height: 20px;
        background-color: rgb(242, 242, 242);
        margin-top: 30px;
      }
      .title {
        color: gray;
        font-size: 14px;
        margin: 10px 0;
      }
      .center-line {
        width: 0px;
        height: 300px;
        margin: 0 324.5px;
        border-left: 1px gray dashed;
        position: absolute;
      }
      .select {
        padding: 0 auto;
        .seat_line {
          width: 650px;
          height: 40px;
          margin: 15px 0;
          padding: 0 25px;
          .seat_row {
            width: 40px;
            height: 40px;
            float: left;
            margin: 0 5px;
            img {
              width: 40px;
            }
          }
          .seat_row:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>